
<template>
  <!-- 对数据进行截取 是当前页数-1 乘以 显示条数     当前页数乘以显示条数 -->
  <el-table :data="
  filterTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)
    " style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
    <!-- 添加输入框 -->
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
    </el-table-column>
    <!-- 添加输入框 -->
    <el-table-column>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 设置导航 -->
  <!-- 修改下面得属性 -->
  <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="$store.state.homeview.tableData.length"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" />
    <Ud/>
</template>
<script lang="ts" setup>
import Ud from '../../components/UpdateDialog.vue'
import { ref, computed } from "vue";
// 引用useStore
import { useStore } from "vuex";
// 得到store对象
const store = useStore();
// 设置需要的参数与方法
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const search = ref('')
// 使用计算属性处理数据
const filterTableData = computed(() =>
store.state.homeview.tableData.filter(
 (data:any) =>
   !search.value ||
   data.name.toLowerCase().includes(search.value.toLowerCase())
)
);

// 修改下面得方法
const handleSizeChange = (val: number) => {
  //一页显示多少条
  pageSize4.value = val;
};
const handleCurrentChange = (val: number) => {
  //页码更改方法
  currentPage4.value = val;
};
interface User {
  date: string;
  name: string;
  address: string;
}
const handleEdit = (index: number, row: User) => {
  console.log(index, row);
  store.commit("SET_DIALOG")
};
const handleDelete = (index: number, row: User) => {
  console.log(index, row);
};


</script>
<style></style>